<th:block layout:decorate="~{layout/accountLayout}" layout:fragment="content">
    <div class="card manage-account-form-wrapper js-manageAccountFormWrapper">
        <h3 th:utext="#{account.password.title}">Change Your Password</h3>
        <hr />
        <div class="col-sm-9 col-md-6">
            <p class="success" th:if="${successMessage}" th:utext="${successMessage}"></p>
            <blc:form class="account-form" action="#" th:action="@{/account/password}" th:object="${changePasswordForm}" method="POST">
                <div class="form-group label-floating error-group" th:classappend="${#fields.hasErrors('currentPassword')}? 'has-error'">
                    <label class="control-label" for="currentPassword" th:utext="#{account.password.currentPassword}">Current Password</label>
                    <input class="form-control" type="password" name="currentPassword" id="currentPassword" th:field="*{currentPassword}" />
                    <span class="text-danger" th:each="err : ${#fields.errors('currentPassword')}" th:utext="${err}"></span>
                </div>
                <div class="form-group label-floating error-group" th:classappend="${#fields.hasErrors('newPassword')}? 'has-error'">
                    <label class="control-label" for="newPassword" th:utext="#{account.password.newPassword}">New Password</label>
                    <input class="form-control" type="password" name="newPassword" id="newPassword" th:field="*{newPassword}" />
                    <span class="text-danger" th:each="err : ${#fields.errors('newPassword')}" th:utext="${err}"></span>
                </div>
                <div class="form-group label-floating error-group" th:classappend="${#fields.hasErrors('newPasswordConfirm')}? 'has-error'">
                    <label class="control-label" for="newPasswordConfirm" th:utext="#{account.password.confirmPassword}">Confirm Password</label>
                    <input class="form-control" type="password" name="newPasswordConfirm" id="newPasswordConfirm" th:field="*{newPasswordConfirm}" />
                    <span class="text-danger" th:each="err : ${#fields.errors('newPasswordConfirm')}" th:utext="${err}"></span>
                </div>
                <div class="text-right">
                    <button type="submit" class="btn btn-primary" th:utext="#{account.password.submit}">Submit</button>
                </div>
            </blc:form>
        </div>
    </div>
</th:block>